<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <!--    导入BootStrap的css文件-->
    <link rel="stylesheet" href="bootstrap3/css/bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap3/css/bootoast.css">
    <!--    导入jquery-->
    <script src="bootstrap3/jquery.js" type="text/javascript" charset="utf-8"></script>
    <!--    导入bootstrap中的js文件-->
    <script src="bootstrap3/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="bootstrap3/js/bootoast.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $(function (){
            getBooks(1);
            //初始化删除模态框
            $('#delModal').on("show.bs.modal",function (event){
                var button = $(event.relatedTarget);//获得按钮
                var bookId = button.data('type-id');//获得按钮上的参数
                var modal = $(this);
                modal.find('.modal-body #delBookId').val(bookId);
            });
            //删除按钮删除图书
            $('#btnDel').click(function (){
                $.ajax({
                    url: 'drop_book',
                    type: 'post',
                    cache: false,
                    data: {bookId: $('#delBookId').val()},
                    dataType: 'json',
                    success: function (rst) {
                        if (rst.code==1){
                            //删除数据
                            bootoast({
                                message: rst.msg,
                                type: 'success',
                                position: 'top',
                                timeout: 2
                            });
                            $('#delModal').modal('hide');//关闭模态框
                            getBooks(1);
                        }else {
                            //删除失败
                            bootoast({
                                message: rst.msg,
                                type: 'danger',
                                position: 'top',
                                timeout: 2
                            });
                        }
                    }
                });
            });

            //初始化修改模块
            $('#delModal2').on("show.bs.modal",function (event){
                var button = $(event.relatedTarget);//获得按钮
                var bookId = button.data('type-id');//获得按钮上的参数
                var bookName = button.data('type-name');//获得按钮上的参数
                var bookType = button.data('type-type');//获得按钮上的参数
                var bookWriter = button.data('type-writer');//获得按钮上的参数
                var bookPress = button.data('type-press');//获得按钮上的参数
                var bookMoney = button.data('type-money');//获得按钮上的参数
                var bookRepertory = button.data('type-repertory');//获得按钮上的参数
                var bookDescribe = button.data('type-describe');//获得按钮上的参数
                var modal = $(this);
                modal.find('.modal-body #bookId').val(bookId);
                modal.find('.modal-body #bookName').val(bookName);
                modal.find('.modal-body #bookType').val(bookType);
                modal.find('.modal-body #bookWriter').val(bookWriter);
                modal.find('.modal-body #bookPress').val(bookPress);
                modal.find('.modal-body #bookMoney').val(bookMoney);
                modal.find('.modal-body #bookRepertory').val(bookRepertory);
                modal.find('.modal-body #bookDescribe').val(bookDescribe);
            });
            //编辑加载图书类型
                $.ajax({
                    url: 'find_type',
                    type: 'get',
                    cache: false,
                    dataType: 'json',
                    success: function (rst) {
                        $('#bookType').empty();
                        $(`<option value="-1">请选择类型</option>`).appendTo('#bookType');
                        if (rst.code==1){
                            for (let i = 0; i < rst.data.length; i++) {
                                var t = rst.data[i];
                                $(`<option value="${t.typeId}">${t.typeName}</option>`).appendTo('#bookType');
                            }
                        }
                    }
                });

            //修改按钮修改图书信息
            $('#btnDel2').click(function (){
                if ($('#bookId').val()=='') {
                    bootoast({
                        message:'编号不能为空',
                        type:'danger',
                        position:'top',
                        timeout:2
                    });
                }else{
                    if ($('#bookName').val() == '') {
                        bootoast({
                            message: '图书名称不能为空',
                            type: 'danger',
                            position: 'top',
                            timeout: 2
                        });
                    } else {
                        if ($('#bookType').val() == '') {
                            bootoast({
                                message: '请选择图书类型',
                                type: 'danger',
                                position: 'top',
                                timeout: 2
                            });
                        } else {
                            if ($('#bookWriter').val() == '') {
                                bootoast({
                                    message: '图书作者不能为空',
                                    type: 'danger',
                                    position: 'top',
                                    timeout: 2
                                });
                            } else {
                                if ($('#bookPress').val() == '') {
                                    bootoast({
                                        message: '图书出版社不能为空',
                                        type: 'danger',
                                        position: 'top',
                                        timeout: 2
                                    });
                                } else {
                                    if ($('#bookMoney').val() == '') {
                                        bootoast({
                                            message: '图书价格不能为空',
                                            type: 'danger',
                                            position: 'top',
                                            timeout: 2
                                        });
                                    }else {
                                        if ($('#bookMoney').val()<=0) {
                                            bootoast({
                                                message: '图书价格不正确',
                                                type: 'danger',
                                                position: 'top',
                                                timeout: 2
                                            });
                                        }else{
                                            if ($('#bookRepertory').val() == '') {
                                                bootoast({
                                                    message: '图书库存不能为空',
                                                    type: 'danger',
                                                    position: 'top',
                                                    timeout: 2
                                                });
                                            }else{
                                                if ($('#bookRepertory').val()<=0) {
                                                    bootoast({
                                                        message: '图书库存不正确',
                                                        type: 'danger',
                                                        position: 'top',
                                                        timeout: 2
                                                    });
                                                }else {
                                                    //正确  修改
                                                    $.ajax({
                                                        url: 'edit_book',
                                                        type: 'post',
                                                        cache: false,
                                                        data: $('#form1').serialize(),
                                                        dataType: 'json',
                                                        success: function (rst) {
                                                            if (rst.code==1){
                                                                //删除数据
                                                                bootoast({
                                                                    message: rst.msg,
                                                                    type: 'success',
                                                                    position: 'top',
                                                                    timeout: 2
                                                                });
                                                                $('#delModal2').modal('hide');//关闭模态框
                                                                getBooks(1);
                                                            }else {
                                                                //删除失败
                                                                bootoast({
                                                                    message: rst.msg,
                                                                    type: 'danger',
                                                                    position: 'top',
                                                                    timeout: 2
                                                                });
                                                            }
                                                        }
                                                    });
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            });

        })

        function getBooks(pn){
            $.ajax({
                url: 'find_books_page',
                type: 'get',
                cache: false,
                data: {pageNow: pn},
                dataType: 'json',
                success: function (rst) {
                    if (rst.code == 1) {
                        $('table tbody').empty();//清空
                        $('.pagination').empty();//清空分页
                        //判断有没有数据
                        if (rst.data.books != null && rst.data.books.length > 0) {
                            //有数据
                            for (let i = 0; i < rst.data.books.length; i++) {
                                //一个类型
                                var book = rst.data.books[i];
                                $(`<tr>
                    <td class="">${book.bookId}</td>
                    <td>${book.bookName}</td>
                    <td>${book.typeName}</td>
                    <td>${book.author}</td>
                    <td>${book.publish}</td>
                    <td>${book.price}</td>
                    <td>${book.storages}</td>
                    <td class="text-center">
                        <input data-type-id="${book.bookId}" data-type-name="${book.bookName}" data-type-type="${book.typeId}"
                         data-type-writer="${book.author}" data-type-press="${book.publish}" data-type-money="${book.price}"
                         data-type-repertory="${book.storages}" data-type-describe="${book.depict}"
                         type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#delModal2" id="btn" value="编辑">
                        <input type="button" data-toggle="modal" data-type-id="${book.bookId}" data-target="#delModal" class="btn btn-danger btn-sm" value="删除">
                    </td>
                </tr>`).appendTo('table tbody');
                            }
                            //处理分页
                            $(`<li><a href="javascript:getBooks(${rst.data.page.pageNow - 1})">&laquo;</a></li>`).appendTo('.pagination');
                            for (let i = 1; i <= rst.data.page.pageCount; i++) {
                                if (i == rst.data.page.pageNow) {
                                    $(`<li class="active"><a href="javascript:getBooks(${i})"> ${i}</ a></li>`).appendTo('.pagination');
                                } else {
                                    $(`<li><a href="javascript:getBooks(${i})">${i}</a></li>`).appendTo('.pagination');
                                }
                            }
                            $(`<li><a href="javascript:getBooks(${rst.data.page.pageNow + 1})">&raquo;</a></li>`).appendTo('.pagination');
                        }else {
                            //没数据
                            $(`<tr>
                                    <td colspan="4" class="text-center text-danger">未查询到数据</td>
                                </tr>`).appendTo('table tbody');
                        }
                    }
                }
            });
        };
    </script>
    <style>
        table th{
            text-align: center;
            font-size: 15px;
        }
        .pagination{
            margin-top: 5px;
        }
    </style>

</head>

<body>
<div class="container-fluid">
    <div class="row">
        <ul class="breadcrumb">
            <li><a href="922welcome.html">首页</a></li>
            <li><a href="#">狗熊岭图书</a></li>
            <li>管理狗熊岭图书</li>
        </ul>
        <div class="col-sm-10 col-sm-offset-1 t">
            <table class="table table-bordered table-hover ">
                <thead>
                <tr class="bg-primary" >
                    <th style="width: 7%">编号</th>
                    <th style="width: 10%">图书名称</th>
                    <th>图书类型</th>
                    <th style="width: 8%">作者</th>
                    <th style="">出版社</th>
                    <th style="width: 7%">价格</th>
                    <th style="width: 8%">库存量</th>

                    <th style="width: 15%">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td class="text-center">1</td>
                    <td>高等数学</td>
                    <td>数学类</td>
                    <td>李博</td>
                    <td>新华出版社</td>
                    <td>19.9</td>
                    <td>1000</td>
                    <td class="text-center">
                        <input  type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#delModal2" value="编辑">
                        <input type="button" data-toggle="modal" data-target="#delModal" class="btn btn-danger btn-sm" value="删除">
                    </td>
                </tr>
                </tbody>
            </table>
    </div>
</div>
</div>
    <div class="row text-center">
        <ul class="pagination">
            <li><a href="#">&laquo;</a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">&raquo;</a></li>
        </ul>
    </div>
<!--  删除模态框-->
<div class="modal fade" id="delModal">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" style="border-left: 5px">温馨提示</h4>
            </div>
            <div class="modal-body">
                确定删除该数据吗?
                <input id="delBookId" type="hidden">
            </div>
            <div class="modal-footer">
                <button class="btn btn-danger btn-sm" id="btnDel">确定
                </button>
                <button class="btn btn-default btn-sm" data-dismiss="modal">取消
                </button>
            </div>
        </div>
    </div>
</div>
<!--  修改模态框-->
<div class="modal fade" id="delModal2">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" style="border-left: 5px">修改图书信息</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm-12">
                            <!--            垂直表单-->
                            <form class="text-center form-horizontal" id="form1">
                                <div class="form-group col-sm-6 div1">
                                    <label for="bookId" class="col-sm-4  control-label">图书编号:</label>
                                    <div class="col-sm-8">
                                        <input type="text" readonly id="bookId" class="form-control" name="bookId">
                                    </div>
                                </div>

                                <div class="form-group col-sm-6 div1">
                                    <label for="bookName" class="col-sm-4 control-label">图书名称:</label>
                                    <div class="col-sm-8 input">
                                        <input type="text" id="bookName" class="form-control" name="bookName">
                                    </div>
                                </div>
                                <div class="form-group col-sm-6 div1">
                                    <label for="bookType" class="col-sm-4 control-label">类别编号:</label>
                                    <div class="col-sm-8">
                                        <select id="bookType" class="form-control" name="typeId">
                                            <option value="">请选择</option>
                                            <option>文学类</option>
                                            <option>哲学类</option>
                                            <option>数学类</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group col-sm-6  div1">
                                    <label for="bookWriter" class="col-sm-4 control-label">图书作者:</label>
                                    <div class="col-sm-8 ">
                                        <input type="text" id="bookWriter" class="form-control" name="author">
                                    </div>
                                </div>
                                <div class="form-group col-sm-6 div1">
                                    <label for="bookPress" class="col-sm-4 control-label">出版社:</label>
                                    <div class="col-sm-8">
                                        <input type="text" id="bookPress" class="form-control" name="publish">
                                    </div>
                                </div>
                                <div class="form-group col-sm-6 div1">
                                    <label for="bookMoney" class="col-sm-4 control-label">图书价格:</label>
                                    <div class="col-sm-8 ">
                                        <input type="number" id="bookMoney" class="form-control" name="price">
                                    </div>
                                </div>
                                <div class="form-group col-sm-6 div1">
                                    <label for="bookRepertory" class="col-sm-4 control-label">图书库存:</label>
                                    <div class="col-sm-8">
                                        <input type="number" id="bookRepertory" class="form-control" name="storages">
                                    </div>
                                </div>
                                <div class="form-group col-sm-12 div1 text-left">
                                    <label for="bookDescribe" class="col-sm-2  control-label">图书描述:</label>
                                    <div class="col-sm-9">
                                        <textarea id="bookDescribe" class="form-control" name="depict"></textarea>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary btn-sm" id="btnDel2">修改
                </button>
                <button class="btn btn-default btn-sm" data-dismiss="modal">取消
                </button>
            </div>
        </div>
    </div>
</div>
</body>
</html>